<template>
	<div class="setNickname_page layer">
		<van-nav-bar :title="$t('my.changeNickname')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="cont">
			<el-input v-model="input" :placeholder="$t('my.verNickname')"></el-input>
		</div>
		<el-button class="submit_but" @click="submit">{{$t('save')}}</el-button>
	</div>
</template>

<script>
	import {
		userProfile
	} from '@/api/my.js'
	export default {
		components: {},
		data() {
			return {
				input: ''
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		watch: {
			userInfo: {
				handler(val) {
					if (val && val.nickname) {
						this.input = val.nickname
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted() {},
		methods: {
			async submit() {
				if (!this.input) {
					this.$toast.fail(this.$t('my.verNickname'))
					return
				}
				const res = await userProfile({
					nickname: this.input
				})
				if (res && res.code == 1) {
					this.$store.dispatch('getUserInfo');
					this.$toast.success(res.msg)
					this.$router.go(-1);
				} else {
					this.$toast.fail(res.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.setNickname_page {
		.cont {
			padding: 20px 0;
			margin-bottom: 40px;

			::v-deep .el-input__inner {
				height: 50px;
				line-height: 50px;
				background-color: #3D3D3D;
				padding: 0 15px;
				border: 0;
				color: #fff;
				border-radius: 16px;

				&::placeholder {
					color: #999;
				}
			}
		}
	}
</style>